<template>
  <div id="total">
    <div id="top">
      <div id="left">
        <div>
          <el-form-item id="zhidan" prop="drug" label="药品名称:">
            <el-input v-model="searchData.drug" placeholder="请输入药品名称" />
          </el-form-item>
        </div>
        <div id="require">
          <el-button type="primary" @click="queryFn()">查询</el-button>
        </div>
      </div>
      <div id="right">
        <el-button id="BtnTow" type="primary" @click="dialogFormVisible = true">
          预警设置
        </el-button>
        <!-- 预警设置弹框 -->
        <el-dialog v-model="dialogFormVisible" title="库存预警">
          <el-form>
            <!-- 药品数量 -->
            <el-form-item label="预警数量" :label-width="formLabelWidth">
              <el-input
                id="input"
                placeholder="请输入预警数量"
                type="number"
                v-model="num"
                autocomplete="off"
              />
            </el-form-item>
          </el-form>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取消</el-button>
              <el-button type="primary" @click="dialogFormVisible = false">
                保存
              </el-button>
            </span>
          </template>
        </el-dialog>
      </div>
    </div>
    <!-- 表单 -->
    <div id="bottom">
      <div id="form">
        <el-table :data="getDrugStockData" style="width: 100%">
          <el-table-column align="center" prop="id" label="序号" width="100" />
          <el-table-column
            align="center"
            prop="drugName"
            label="药品名称"
            width="180"
          />
          <el-table-column
            align="center"
            prop="drugSpecification"
            label="规格"
            width="120"
          />
          <el-table-column
            align="center"
            prop="drugFactory"
            label="生产厂家"
            width="150"
          />
          <el-table-column
            align="center"
            prop="drugSort"
            label="药品分类"
            width="130"
          />
          <el-table-column
            align="center"
            prop="allStock"
            label="库存"
            width="120"
          >
            <template #default="scope">
              {{ scope.row.allStock }}g
              <span id="kuCun" v-if="Number(scope.row.allStock) <= num"
                >&nbsp;&nbsp;库存不足</span
              >
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="trade"
            label="批发价"
            width="200"
          >
            <template #default="scope"> {{ scope.row.trade }}元 </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="prescription"
            label="处方价"
            width="120"
          >
            <template #default="scope">
              {{ scope.row.prescription }}元
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="allTrade"
            label="批发额"
            width="120"
          >
            <template #default="scope"> {{ scope.row.allTrade }}元 </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="allPre"
            label="处方额"
            width="120"
          >
            <template #default="scope"> {{ scope.row.allPre }}元 </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="160">
            <template #default="scope">
              <!-- 调价按钮 -->
              <el-button
                id="BtnTow"
                type="primary"
                @click="adjustPriceFn(scope.row)"
              >
                调价
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页器 -->
      <div id="pager-wapper">
        <el-pagination
          :page-sizes="[2, 3, 5, 10]"
          id="paging"
          background
          layout="prev, pager, next"
          v-model:page-size="pageSize"
          :total="Istore.state.stock.tableTotal"
          @current-change="pageChange"
        />
      </div>
    </div>
  </div>

  <!-- 调价弹框 -->
  <el-dialog v-model="dialogFormVisible1" title="批量设置">
    <el-form :model="form1">
      <h3 id="Notice">
        <span>药品名称:&nbsp;</span>
        <textarea id="text" v-model="bankName"> </textarea>
      </h3>
      <h3 id="Notice">
        <span>批发价:&nbsp;</span>
        <textarea id="text" v-model="Wholesale"> </textarea>
      </h3>

      <el-form-item label="处方价" :label-width="formLabelWidth">
        <div id="inputOne">
          <el-input
            placeholder="处方价:比例或金额"
            v-model="form1.price"
            autocomplete="off"
          />
        </div>
        <div>
          <!-- 选择器 -->
          <el-form-item label="" :label-width="5">
            <el-select v-model="form1.region" placeholder="*(%比例)">
              <el-option label="+(金额)" value="shanghai" />
              <el-option label="*(%比例)" value="beijing" />
            </el-select>
          </el-form-item>
        </div>
      </el-form-item>
      <!-- 批发价 -->
      <el-form-item label="库存" :label-width="formLabelWidth">
        <div id="inputTwo">
          <el-input
            placeholder="请输入库存"
            v-model="form1.number"
            autocomplete="off"
          />
        </div>
        <div>
          <el-button>g</el-button>
        </div>
      </el-form-item>
      <h2 id="NoticeTwo">
        库存:&nbsp;&nbsp;
        <textarea id="text2" v-model="inventory"> </textarea>
        处方价:&nbsp;&nbsp;
        <textarea id="text2" v-model="Prescription"> </textarea>
      </h2>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取消</el-button>
        <el-button type="primary" @click="application()"> 应用 </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { ElMessage } from "element-plus";
import { ref, reactive, defineComponent, computed, onBeforeMount } from "vue";
import { mapMutations, mapGetters, useStore } from "vuex";
const Istore = useStore();
// 调价默认展示数据
const adjustPriceFn = (row: any) => {
  dialogFormVisible1.value = true;
  // console.log(row.drugName);
  bankName.value = row.drugName;
  Wholesale.value = row.prescription;
  inventory.value = row.allStock;
  Prescription.value = row.prescription;
};
// 弹窗内药品名称
const bankName = ref("");
// 弹窗内批发价
const Wholesale = ref("");
// 弹窗内库存
const inventory = ref("");
// 弹窗内处方价
const Prescription = ref("");
const setDrugStockData = mapMutations([
  "setDrugStockData",
]).setDrugStockData.bind({
  $store: Istore,
});
// 调价
const setPriceData = mapMutations(["setPriceData"]).setPriceData.bind({
  $store: Istore,
});

// 展示默认数据
const getDrugStockData = computed(
  mapGetters(["getDrugStockData"]).getDrugStockData.bind({
    $store: Istore,
  })
);
// 分页
// 默认为5页
const pageSize = ref(5);
const drugName = ref();
onBeforeMount(() => {
  setDrugStockData({
    currentPage: 0,
    pageSize: pageSize.value,
    drugName: drugName.value,
  });
});
// 分页功能实现
const current = ref(1)
const pageChange = (currentPage: any) => {
  setDrugStockData({ currentPage: currentPage, pageSize: pageSize.value });
  current.value = currentPage
};
const formLabelWidth = "100px";
// 预警弹窗
const num = ref(100);
// 弹窗表格
const form1 = ref({
  // 处方价
  price: "",
  // 库存
  number: "",
  region: "",
});

// 添加药品弹框内的药品名称输入框
const searchData = reactive({
  drug: "",
});
// 根据药品名称查询药品信息
const queryFn = () => {
  // console.log(11111);
  // console.log(searchData.drug);
  // 页面分页问题--------------------修改
  setDrugStockData({
    currentPage: 1,
    pageSize: pageSize.value,
    drugName: searchData.drug,
  });

};
// 调价
const application = () => {
  // console.log(form1.value.price);
  // console.log(form1.value.price);
  // console.log(bankName.value);
  // 调价数据获取
  setPriceData({
    allStock: form1.value.number,
    price: form1.value.price,
    drugName: bankName.value,
  });
  // 弹窗
  ElMessage({
    message: "调价成功",
    type: "success",
  });
  dialogFormVisible1.value = false;
  // 刷新页面
  setDrugStockData({
    currentPage: current.value,
    pageSize: pageSize.value,
    drugName: drugName.value,
  });
  // 将输入框为空
  form1.value.price = "";
  form1.value.number = "";
};
const dialogFormVisible = ref(false);
const dialogFormVisible1 = ref(false);
</script>
<style scoped>
#text {
  /* 去除边框 */
  border: none;
  resize: none;
  /* 去除选中后的边框 */
  outline: none;
  font-size: 18px;
  font-weight: 800;
  margin-top: 22px;
}
#text2 {
  /* 去除边框 */
  border: none;
  resize: none;
  /* 去除选中后的边框 */
  outline: none;
  font-size: 25px;
  font-weight: 1000;
  margin-top: -2px;
}
#kuCun {
  font-size: 10px;
  color: rgb(250, 56, 56);
}
#top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
#left {
  display: flex;
  align-items: center;
   ;
  height: 50px;
}
#left > div {
  margin-left: 20px;
}
#right {
  border: red solid 1px;
  display: flex;
  justify-content: center;
  align-items: center;
}
#red {
  color: red;
}
#middle {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 1100px;
   ;
  height: 40px;
}
#middle > div {
  margin-left: 20px;
}
#bottom {
   ;
}
#pager-wapper {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#pager-wapper > .el-pagination {
   
  justify-content: center;
  align-items: center;
}
#zhidan {
  display: flex;
  margin-top: 20px;
   ;
}
#require {
  display: flex;
}
#inputOne {
  width: 50px;
}
.el-form-item > div {
  display: flex;
}
#inputOne {
  width: 300px;
}
#inputTwo {
  width: 300px;
}
#Notice {
  display: flex;
  align-items: center;
  justify-content: center;
   ;
}
#Notice > span {
  display: flex;
  align-items: center;
  justify-content: center;
   ;
  margin-left: 160px;
}

#NoticeTwo {
  display: flex;
  justify-content: center;
  margin-top: 50px;
}
</style>
